<template>
	<view>
		<view class="list-tip">
			<view class="list-warp clearFix" @click="item_list(item)"  v-for="(item,index) in list" :key="index">
				<!-- {{item}} -->
				<image :src="item.img" mode=""></image>
				<view class="list-text">
					<h2><text class="l-txt">{{item.tit}}</text><text class="dec">详情></text></h2>
					<text class="con">{{item.dic}}</text>
					<view class="list-bottom">
						<text class="list-state" v-if="item.state===0">活动进行中</text> 
						<text class="list-state" v-else-if="item.state===1">活动已结束</text> 
						<text class="list-state" v-else-if="item.state===2">近期活动</text> 
						<button @click.stop="sign(item.upSign)" v-if="item.upSign===0">报名</button>
						<button @click.stop="sign(item.upSign)" v-else-if="item.upSign===1">查看</button>
						<button @click.stop="sign(item.upSign)" v-else-if="item.upSign===2">已报名</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			// imgs:{
			// 	type:[Boolean,String],
			// 	default: true
			// }
			list:Array
		},
		data() {
			return {
				img:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg'
			}
		},
		mounted() {
		},
		methods: {
			item_list(val){
				this.$emit('itemDic',val)
			},
			sign(n){
				this.$emit('sign',n)
			}
		}
	}
</script>

<style scoped>
.list-tip{
	width: 95%;
	margin: 0 auto 0 auto;
	/* background-color: #FFFFFF; */
	
	/* padding: 20rpx; */
	
	}
.clearFix:after {
	content: '';
	visibility: hidden;
	height: 0;
	display: block;
	clear: both;
}
.list-warp{
	margin-bottom: 20rpx;
	background-color: #FFFFFF;
	box-sizing: border-box;
	border-radius: 20rpx;
	padding: 10px;
	}
	.list-warp:last-child{
		margin: 0;
	}
.list-warp image{
	border-radius: 20rpx;
	width: 250rpx;
	float: left;
	height: 200rpx;
}
.list-warp .list-text{
	float: left;
	width: 380rpx;
	height: 200rpx;
	box-sizing: border-box;
	margin-left: 20px;
	position: relative;
}
.list-warp .list-text .l-txt{
	width: 250rpx;
	height: 50rpx;
	display: inline-block;
	overflow: hidden;
}
.list-warp .list-text .con{
	font-size: 26rpx;
	height: 40px;
	line-height: 22px;
	    display: block;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
}
 
.list-warp .list-text h2{
	font-size: 35rpx;
	font-weight: 700;
}
.list-text h2 .dec{
	float:right;
	font-weight: normal;
	font-size: 16px;
	color: #1c8be2;
	}
.list-warp .list-text .list-bottom{
	position: absolute;
	bottom: 0;
	left:0;
	width: 100%;
}
.list-warp .list-text .list-bottom button{
	float: right;
	background-color: #1c8be2;
	color: #fff;
	padding:8rpx 40rpx;
	font-size:30rpx;
	line-height:normal;
	border-radius: 50rpx;
}
.list-warp .list-text .list-state{
	display: inline-block;
	padding-top:10rpx;
	
	color:#ffb484;
}
</style>
